import type { Query } from "@/interface/Query";
import { ref , onMounted , getCurrentInstance } from 'vue'
import type {TableColumnsType} from "ant-design-vue";
import type { Property } from "@/interface/Property";
import { operatorApi  , listApi , oneIdApi , deleteApi } from "@/controller/PropertyApi"
import { message } from "ant-design-vue";
import type { Rule } from "ant-design-vue/es/form";
import { adminBindSelectApi } from "@/controller/UserApi"
import type { SelectProps } from 'ant-design-vue';
import dayjs from "dayjs"


export default function () {

    const { proxy } = getCurrentInstance() as any;

    let queryModel  = ref({
        page: 1,
        size: 15
    } as Query);

    let searchBox = ref(true);

    let total = ref(0);

    onMounted(() => {
        list();
    });

    function pageChange(page: number,size: number) {
        queryModel.value.page = page;
        queryModel.value.size = size;
        list();
    }

    function list() {
        listApi(queryModel.value).then(res => {
            if (res.code == 200) {
                total.value = parseInt(res.data.totalRow);
                tableData.value = res.data.records;
            }
        });
    }

    const userData = ref<SelectProps['options']>([]);
    function adminBindSelect(keyWord ? : string) {
        adminBindSelectApi(keyWord).then(res => {
            if (res.code == 200) {
                userData.value = res.data as SelectProps['options'];
            }
        });
    }

    const filterUserOption = (input: string, option: any) => {
        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };




    let columns  = ref<TableColumnsType>([
        {
            title: '名称',
            dataIndex: 'propertyName',
            fixed: 'left',
            width: 150,
            resizable: true,
            align: 'center'
        },
        {
            title: '小区名称',
            dataIndex: 'communityName',
            width: 150,
            resizable: true,
            align: 'center'
        },
        {
            title: '地址',
            dataIndex: 'address',
            width: 150,
            resizable: true,
            align: 'center'
        },
        {
            title: '联系人',
            dataIndex: 'contactPerson',
            width: 150,
            resizable: true,
            align: 'center'
        },
        {
            title: '联系电话',
            dataIndex: 'phoneNumber',
            width: 150,
            resizable: true,
            align: 'center'
        },
        {
            title: '物业费(元/m2)',
            dataIndex: 'propertyFee',
            width: 150,
            resizable: true,
            align: 'center'
        },
        {
            title: '电费(元/度)',
            dataIndex: 'electricityFee',
            width: 150,
            resizable: true,
            align: 'center'
        },
        {
            title: '水费(元/吨)',
            dataIndex: 'waterFee',
            width: 150,
            resizable: true,
            align: 'center'
        },
        {
            title: '燃气费(元/m3)',
            dataIndex: 'waterFee',
            width: 150,
            resizable: true,
            align: 'center'
        },
        {
            title: '建成日期',
            dataIndex: 'establishedDate',
            width: 150,
            resizable: true,
            align: 'center'
        },
        {
            title: '物业类型',
            dataIndex: 'propertyType',
            width: 150,
            resizable: true,
            align: 'center'
        },
        {
            title: '建成面积',
            dataIndex: 'buildingArea',
            width: 150,
            resizable: true,
            align: 'center'
        },
        {
            title: '操作',
            dataIndex: 'action',
            width: 260,
            fixed: 'right',
            resizable: true,
            align: 'center'
        },
    ])

    function handleResizeColumn(w : any, col : any) {
        col.width = w;
    }

    let rules : Record<string, Rule[]> = {
        propertyName: [
            { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        communityName: [
            { required: true, message: '请输入小区名称', trigger: 'blur' },
        ],
        address: [
            { required: true, message: '请输入地址', trigger: 'blur' },
        ],
        contactPerson: [
            { required: true, message: '请输入联系人', trigger: 'blur' },
        ],
        phoneNumber: [
            { required: true, message: '请输入联系电话', trigger: 'blur' },
        ],
        propertyFee: [
            { required: true, message: '请输入物业费', trigger: 'blur' },
        ],
        waterFee: [
            { required: true, message: '请输入水费', trigger: 'blur' },
        ],
        electricityFee: [
            { required: true, message: '请输入电费', trigger: 'blur'}
        ],
        gasFee: [
            { required: true, message: '请输入燃气费', trigger: 'blur' }
        ],
        establishedDate: [
            { required: true, message: '请输入建成日期', trigger: 'blur' }
        ],
        propertyType: [
            { required: true, message: '请输入物业类型', trigger: 'blur' }
        ],
        buildingArea: [
            { required: true, message: '请输入物业面积', trigger: 'blur' }
        ]
    }


    function remove(id : string) {
        deleteApi(id).then(res => {
            if(res.code == 200) {
                message.success('删除成功');
                list();
            }else {
                message.error(res.msg);
            }
        })
    }


    function resetQuery() {
        queryModel.value = {
            page: 1,
            size: 15
        } as Query;
        list();
    }

    let property = ref({} as Property);

    let operatorStore = ref({
        cmd: 0,
        open: false
    });

    function operator(cmd : number , id? : string | null) {
        adminBindSelect();
        operatorStore.value.cmd = cmd;
        operatorStore.value.open = true;
        if(id) {
            oneIdApi(id).then( res => {
                if (res.code == 200) {
                    property.value = res.data;
                    if (property.value.establishedDate) {
                        property.value.establishedDate = dayjs(property.value.establishedDate,"YYYY-MM-DD") as any;
                    }
                }
            });
        }
    }

    let tableData = ref<Property[]>();

    let formRef = ref();
    function submitOperator() {
        formRef.value
            .validate()
            .then(() => {
                operatorApi(property.value).then(res => {
                    if(res.code == 200) {
                        message.success( operatorStore.value.cmd == 0 ? '新增物业成功!' : '编辑物业成功');
                        list();
                        property.value = {} as Property;
                        operatorStore.value.open = false;
                    }else {
                        message.error(res.msg);
                    }
                });
            })
            .catch(( e : any ) => {

            });
    }


    function resetFrom() {
        property.value = {} as Property;
        operatorStore.value.open = false;
    }

    return {
        searchBox, queryModel, list, resetQuery , total ,
        pageChange , columns , property , operatorStore ,
        operator , formRef , handleResizeColumn ,
        tableData , submitOperator , resetFrom , rules ,
        userData , filterUserOption , remove
    }
}
